“Hermes” Documentation by “IG_design” v1.0

“Hermes”

Created: 03/02/2014
By: Ivan Grozdic aka IG_design
Email: ivang.design@yahoo.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

CSS Files
Image Files
JavaScript
Sources and Credits

B) CSS Files and Structure - top

This theme uses css files contained in the css folder

Css files:

base
layout
font-awesome
project
skeleton

Css file layout:

Menu:


 
/* #Navigation
================================================== */


.menu-btn{
	position: fixed;
	width: 50px;
	height: 50px;
	top: 30px;
	left: 30px;
	background: rgba(60,60,60,0.3) url(../images/menu.png) no-repeat center center;
	cursor:pointer;
	z-index:10000;
	-webkit-transition : all 0.2s ease-out;
	-moz-transition : all 0.2s ease-out;
	-o-transition :all 0.2s ease-out;
	transition : all 0.2s ease-out;
}
.menu-btn:hover{
	background: rgba(60,60,60,0.8) url(../images/menu.png) no-repeat center center;
}

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,1);
	z-index: 100000;
}

/* Overlay closing cross */
.overlay .overlay-close {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	background: url(../images/cross.png) no-repeat center center;
	background-size:30px 30px;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
}

/* Menu style */
.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
}

.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 5);
	min-height: 54px;
}

.overlay ul li a {
	font-size: 20px;
	font-family: 'Lato', sans-serif;
	font-weight:400;
	text-transform:uppercase;
	display: block;
	color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

/* Effects */


.wrapper {
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.wrapper.overlay-open {
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
}

.overlay-contentscale {
	visibility: hidden;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
	transition: transform 0.5s, visibility 0s 0.5s;
}

.overlay-contentscale.open {
	visibility: visible;
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}

slider:


#gallery {
position: absolute;
width: 100%;
height: 700px;
top: 0;
left: 0;
}
#controls div {
}
#controls div:hover:not(.counter) {
}
#controls div:not(.counter) {
}
#controls div.sel {
}	
.prev {
	top:50%;
	margin-top:-29px;
	position:absolute;
	cursor:pointer;
	opacity:.4;
	background:url('../images/arrow-left.png') no-repeat center center;
	-webkit-transition : all 0.2s ease-out;
	-moz-transition : all 0.2s ease-out;
	-o-transition :all 0.2s ease-out;
	transition : all 0.2s ease-out;
	left:150px;
	width:31px;
	height:58px;
	z-index:100000;
}
.next {
	top:50%;
	margin-top:-29px;
	position:absolute;
	cursor:pointer;
	opacity:.4;
	background:url('../images/arrow-right.png') no-repeat center center;
	-webkit-transition : all 0.2s ease-out;
	-moz-transition : all 0.2s ease-out;
	-o-transition :all 0.2s ease-out;
	transition : all 0.2s ease-out;
	right:150px;
	width:31px;
	height:58px;
	z-index:100000;
}

			
			
			
.prev:hover, .next:hover {
	opacity:.7;
}
.prev:active, .next:active {
	opacity:.7;
}






.just_pattern { 
	background-image: url(../images/pattern.png); 
	position: absolute; 
	opacity: 0.8; 
	left: 0px;
	top: 0px;
	right:0;
	bottom:0;
	width: 100%;
	height: 100%; 
	z-index: 10; 
}

.logo {
	position: absolute;
	top:30px;
	left:95px;
	width: 150px;
	height:50px;
	background:url('../images/logo1.png') no-repeat center center;
	background-size:150px 50px;
	z-index: 3900;
}
.big-text { 
	position: absolute; 
	top: 50%;
	margin-top:-55px;
	width: 100%;
	font-family: 'Montserrat', sans-serif;
	text-shadow: 0 0 15px rgba(0,0,0,0.3);
	text-transform:uppercase;
	text-align:center;
	font-weight:700;
	font-size: 70px; 
	line-height:70px;
	color: #ededed;
	z-index: 20; 
}
.small-text { 
	position: absolute; 
	top: 50%;
	margin-top:35px;
	width: 100%;
	font-family: 'Lato', sans-serif;
	text-shadow: 0 0 5px rgba(0,0,0,0.3);
	text-transform:uppercase;
	text-align:center;
	font-weight:400;
	font-size: 20px; 
	line-height:20px;
	color: #fff;
	z-index: 20; 
}

About:


#about{
	position: relative; 
	margin: 0 auto;
	background:url('../images/5.jpg') no-repeat center center;
	background-size:cover;
	overflow:hidden;
	z-index:2;
}



.big-text1 { 
	position: absolute; 
	top: 50px;
	width: 90%;
	right:10%;
	font-family: 'Montserrat', sans-serif;
	text-shadow: 0 0 5px rgba(0,0,0,0.2);
	text-transform:uppercase;
	text-align:right;
	font-weight:700;
	font-size: 50px; 
	line-height:50px;
	color: #fff;
	z-index: 20; 
}
.big-text1 span { 
	border-bottom:1px dashed rgba(255,255,255,.5);
}
.small-text1{ 
	position: absolute; 
	top: 120px;
	width: 90%;
	right:10%;
	font-family: 'Lato', sans-serif;
	text-shadow: 0 0 5px rgba(0,0,0,0.2);
	text-transform:uppercase;
	text-align:right;
	font-weight:400;
	font-size: 14px; 
	line-height:14px;
	color: #fff;
	z-index: 20; 
}	


.link1{ 
	position: absolute; 
	top: 160px;
	width: 90%;
	right:10%;
	font-family: 'Lato', sans-serif;
	text-transform:uppercase;
	text-align:right;
	font-weight:400;
	font-size: 16px; 
	line-height:16px;
	color: #fff;
	z-index: 20; 
}
.link1 a {
	position: relative;
	display: inline-block;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	text-align:center;
	letter-spacing: 1px;
	font-weight: 400;
	font-size: 13px;
}


.link1 a:hover,
.link1 a:focus {
	outline: none;
}
.cl-effect-20 a {
	line-height: 2em;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;
}

.cl-effect-20 a span {
	position: relative;
	display: inline-block;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	padding: 8px 35px 5px;
	background: #3b3e45;
	box-shadow: inset 0 3px #dbd8d8;
	-webkit-transition: background 0.6s;
	-moz-transition: background 0.6s;
	transition: background 0.6s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}

.cl-effect-20 a span::before {
	position: absolute;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	box-shadow: inset 0 3px #5b5b5a;
	top: 0;
	left: 0;
	text-shadow:none;
	width: 100%;
	height: 100%;
	background: #fff;
	color: #000;
	padding-top:8px;
	content: attr(data-hover);
	-webkit-transform: rotateX(270deg);
	-moz-transform: rotateX(270deg);
	transform: rotateX(270deg);
	-webkit-transition: -webkit-transform 0.6s;
	-moz-transition: -moz-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	pointer-events: none;
}

.cl-effect-20 a:hover span,
.cl-effect-20 a:focus span {
	background: #3b3e45;
}

.cl-effect-20 a:hover span::before,
.cl-effect-20 a:focus span::before {
	-webkit-transform: rotateX(10deg);	
	-moz-transform: rotateX(10deg);
	transform: rotateX(10deg);
}

/* #Portfolio
================================================== */

#portfolio{
	position: relative; 
	margin: 0 auto;
	background:url('../images/4.jpg') no-repeat center center;
	background-size:cover;
	width: 100%;
	overflow:hidden;
	z-index:2;
}
.big-text2 { 
	position: absolute; 
	bottom: 165px;
	width: 90%;
	left:10%;
	font-family: 'Montserrat', sans-serif;
	text-shadow: 0 0 5px rgba(0,0,0,0.2);
	text-transform:uppercase;
	text-align:left;
	font-weight:700;
	font-size: 50px; 
	line-height:50px;
	color: #fff;
	z-index: 20; 
}
.big-text2 span { 
	border-bottom:1px dashed rgba(255,255,255,.5);
}
.small-text2{ 
	position: absolute; 
	bottom: 130px;
	width: 90%;
	left:10%;
	font-family: 'Lato', sans-serif;
	text-shadow: 0 0 5px rgba(0,0,0,0.2);
	text-transform:uppercase;
	text-align:left;
	font-weight:400;
	font-size: 14px; 
	line-height:14px;
	color: #fff;
	z-index: 20; 
}	


.link2{ 
	position: absolute; 
	bottom: 60px;
	width: 90%;
	left:10%;
	font-family: 'Lato', sans-serif;
	text-transform:uppercase;
	text-align:left;
	font-weight:400;
	font-size: 16px; 
	line-height:16px;
	color: #fff;
	z-index: 20; 
}
.link2 a {
	position: relative;
	display: inline-block;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	text-align:center;
	letter-spacing: 1px;
	font-weight: 400;
	font-size: 13px;
}


.link2 a:hover,
.link2 a:focus {
	outline: none;
}

C) Image Files - top

All the graphic elements for the entire theme are contained at the "images" folder.

D) JavaScript - top

All the pages link the neccessary js files inside the "head" tag of the document. If you need to modify the behavior from a certain jquery element open the "js" folder where you can alter the parameters of some of the js elements.

E) Sources and Credits - top

I've used the following images, icons or other files as listed.

JAVASCRIPT

FONTS

Lato

Once again, thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

IG_design

Go To Table of Contents